<template>
  <div>
    <van-nav-bar
      title="资料下载"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad">
        <div class="card" v-for="(item,index) in list" :key="index" :title="item.title">
          <p>{{item.title}}</p>
          <ul>
            <li v-for="(i,v) in item.files" :key="v">
              <p>{{ i.fileName }}</p>
            </li>
          </ul>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
export default {
  created() {
    this.$data.role = this.$route.query.role;
  },
  data() {
      return {
        role:-1,
        list: [],
        loading: false,
        finished: false,
        refreshing: false,
      };
    },
    methods: {
      onLoad() {
        setTimeout(() => {
          if (this.refreshing) {
            this.list = [];
            this.refreshing = false;
          }

          var singleFile = {
            fileName: '已',
            fileType: 1
          }

          for (let i = 0; i < 10; i++) {
            var fileObj = {
              title:"文件列表" + i,
              files:[]
            }
            if(i % 2 == 0) {
              singleFile.fileName = '偶数位文件'
              fileObj.files.push(singleFile)
            } else {
              singleFile.fileName = '奇数位文件'
              fileObj.files.push(singleFile)
              fileObj.files.push(singleFile)
              fileObj.files.push(singleFile)
            }
            this.list.push(fileObj);
          }
          this.loading = false;
          console.log(this.list)
          if (this.list.length >= 40) {
            this.finished = true;
          }
        }, 1000);
      },
      onRefresh() {
        // 清空列表数据
        this.finished = false;

        // 重新加载数据
        // 将 loading 设置为 true，表示处于加载状态
        this.loading = true;
        this.onLoad();
      },
      onClickLeft() {
        this.$router.push({path:'/home',query:{role:this.$data.role}})
      },
    },
}
</script>

<style>
  .card {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    width: 95%;
    margin-left: 2.5%;
    border-radius: 5px;
    padding-bottom: 10px;
    padding-top: 10px;
  }
</style>
